<template>
	<view class="flex justify-between bg-white padding-xl">
		<view class="flex">
			<image @click="login" class="cu-avatar lg margin-right-sm"
				:src="uinfo&&uinfo.avatar ? uinfo.avatar:'/src/static/logo.png'" mode=""></image>
			<view class="">
				<text class="title">{{uinfo?.username?uinfo.username:'尚未登陆'}}</text>
				<view class="margin-tb-xs">
					普通用户{{counter.count}}
				</view>
			</view>
		</view>
		<button class="cu-btn line-orange" @click="handleSetting">编辑资料</button>
	</view>
	
	<view class="cu-list menu cu-card">
		<view v-for="item in menuList" class="cu-item arrow" @click="handleMenu">
			<view class="content flex align-center">
				<text :class="['iconfont text-xxl margin-right-sm',item.icon]"></text>
				{{item.title}}
			</view>
		</view>
	</view>
	
	<view class="padding" v-if="uinfo">
		<button class="cu-btn line-red block" @click="handleExit">退出登录</button>
	</view>

</template>

<script setup lang="ts">
import {
	computed
} from 'vue';
import {
	useStore
} from 'vuex'
import type {MineMenu} from '@/model/user'
import {useCounterStore} from '@/store/counter'
const counter = useCounterStore()
const store = useStore()
const uinfo = computed(()=>store.state.user.uinfo)
const handleSetting = () => {
	if(uinfo.value){
		uni.navigateTo({
			url: '/pages/mine/setting'
		})
	}else{
		uni.navigateTo({
			url: '/pages/account/login'
		})
	}
}


// 提取状态机子模块数据

const login = () => {
	uni.navigateTo({
		url: '/pages/account/login'
	})
}

//列表渲染

let menuList:Array<MineMenu> = [
	{icon:'icon-a-001_caidan',title:'历史投递'},
	{icon:'icon-a-001_shoucang',title:'我的收藏'},
	{icon:'icon-a-001_kefu',title:'帮助联系'},
	{icon:'icon-a-001_liwu',title:'关于我们'},
	// {icon:'icon-a-001_xiazai',title:'退出登录'},
]
const handleMenu = ()=>{
	uni.showToast({
		title:'功能开发中',
		icon:'none'
	})
}

// 退出登录
const handleExit = ()=>{
	store.commit('user/exit')
}
</script>

<style >
page{
	background-color: #fff;
}
</style>